<template>
<div>
    <el-input
    prefix-icon="el-icon-search"
    placeholder="请输入名称"
    style="width: 200px;"
    v-model="input"
    clearable
    >
    </el-input>
    <el-button
    type="success"
    icon="el-icon-search"
    style="width:80px;margin-left:10px"
    @click="selectBy()"
    >搜索</el-button
    >
    <el-table :data="tableData" border style="width: 100%;margin-top:15px;">
    <el-table-column
        prop="name"
        label="名称"
        align="center"
        width="130"
    >
    </el-table-column>
    <el-table-column
        prop="type"
        label="品类"
        align="center"
        width="130"
    >
    </el-table-column>
    <el-table-column
        prop="date"
        label="排期"
        align="center"
        width="180"
    >
    </el-table-column>
     <el-table-column
        prop="weightStandard"
        label="使用规格"
        align="center"
        width="130"
    >
    </el-table-column>
    <el-table-column
        prop="serviceStandard"
        label="服务规格"
        align="center"
        width="130"
    >
    </el-table-column>

    <el-table-column
        prop="time"
        label="耗时(小时)"
        align="center"
        width="120"
    >
    </el-table-column>
    <el-table-column
        prop="level"
        label="服务员等级"
        align="center"
        width="140"
    >
    </el-table-column>
    <el-table-column
        prop="price"
        label="价格(元)"
        align="center"
        width="120"
    >
    </el-table-column>
    <el-table-column align="center" label="操作" style="width:200px;">
        <template slot-scope="scope">
        <el-button
        size="mini"
        type="info"
        icon="el-icon-search"
        style="width:80px;"
        @click.prevent="updateByShow(scope.$index)"
        >修改</el-button
        >
        <el-button
        size="mini"
        type="warning"
        icon="el-icon-edit"
        style="width:80px;"
        @click.prevent="deleteRow(scope.$index)"
        >删除</el-button
        >
        </template>
    </el-table-column>
    </el-table>

    <!-- 修改弹框 -->
    <el-dialog
    :title="updateById"
    :visible.sync="updateVisible"
    width="30%"
    >
    <el-form
        :model="updateData"
        ref="updateDate"
        label-width="100px"
        class="demo-ruleForm"
    >
        <el-form-item label="姓名：" style="width:340px;">
        <el-input v-model="updateData.serviceOrderOwner"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" style="width:400px">
        <el-input v-model="updateData.serviceOrderTel"></el-input>   
        </el-form-item>     
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="updateVisible = false">取 消</el-button>
        <el-button type="primary" @click="update()">修 改</el-button>
    </span>
    </el-dialog>


    <!-- 分页 -->
        <div class="block" style="margin-top:20px;">
            <!-- size-change 每页条数，改变时会触发	
            current-change 当前页，改变时会触发	
            current-page 当前页数 
            page-sizes 每页显示个数选择器的选项设置
            page-size 每页显示条目个数
            layout	组件布局
            total	总条目数-->
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.pageNo"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="this.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.total"
            >
            </el-pagination>
        </div>
</div>
</template>

<script>
import {getServiceList} from '@/services/ServiceOrder.js'
import {deleteService} from '@/services/ServiceOrder.js'
import {getByService} from '@/services/ServiceOrder.js'
import {updateService} from '@/services/ServiceOrder.js'


export default {
data() {
    return {
    pageNo: 1,
    pageSize: 2,
    total: 4,
    tableData: [
        {
        id: "",
        name: "",
        date: "",
        weightStandard: "",
        serviceStandard:"",
        time: "",
        level:"",
        price:"",
        type:""
        },
    ],
    input: "",
    updateVisible: false,
    updateById: "修改服务订单信息",
    updateData: {
        serviceOrderId:"",
        serviceOrderOwner:"",
        serviceOrderTel:""
    },
    };
},
async created(){
    var a=await getServiceList(null,this.pageNo,this.pageSize);
    this.tableData=a.list;
    this.tabList();
},
methods: {
    async deleteRow(index){
        this.$confirm("此操作将永久删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
    }).then(async () => {
            let resp = await deleteService((index+1));
            if (resp === true) {
                location.reload();
                this.$message.success("删除成功！");
            } else {
                this.$message.error("删除失败！");
            }
        }).catch(() => {
            this.$message({
                type: "info",
                message: "已取消删除",
            });
        });
    },
    async updateByShow(index,row){
        var a=await getByService((index+1));
        this.updateData=a;
        this.updateVisible=true;
    },
    async selectBy(){
        var a=await getServiceList(this.input,this.pageNo,this.pageSize);
        this.tableData=a.list;
    },
    async update(){
        var isUpdate=await updateService(this.updateData);
        if(isUpdate){
            this.$message.success("修改成功！");
            location.reload(); 
            this.updateVisible=false;
        }else{
            this.$message.error("修改失败！");
        }
    },
    //  分页
    async tabList() {
        var resp = await getServiceList(this.input,this.pageNo,this.pageSize);
        this.tableData = resp.list;
        this.total = resp.total;
        },
        async handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        var resp = await getServiceList(this.input, this.pageNo, this.pageSize);
        this.tableData = resp.list;
        this.total = resp.total;
        },
        async handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNo = val;
        var resp = await getServiceList(this.input, this.pageNo, this.pageSize);
        this.tableData = resp.list;
        this.total = resp.total;
    },
},
computed: {
    
}
};
</script>
<style scoped>
</style>
